<script setup lang="ts">
import { ref } from 'vue';
import { Icon as TIcon } from 'tdesign-icons-vue-next';
import { useRouter, useRoute } from "vue-router";

const route = useRoute();
const router = useRouter();
const value = ref('/');
const list = ref([
  { value: '/', label: '首页', icon: 'home' },
  { value: '/compainon', label: '陪玩', icon: 'app' },
  { value: '/mood', label: '动态', icon: 'app' },
  { value: '/message', label: '消息', icon: 'chat' },
  { value: '/my', label: '我的', icon: 'user' },
]);

const change = (v: string) => {
  router.push(v);
};
</script>

<template>
  <div>
    <t-tab-bar v-if="!route.meta.hideTabBar" v-model="value" theme="tag" :split="false" @change="change">
      <t-tab-bar-item v-for="item in list" :key="item.value" :value="item.value" router :to="item.path">
        {{ item.label }}
        <template #icon>
          <t-icon :name="item.icon" />
        </template>
      </t-tab-bar-item>
    </t-tab-bar>
  </div>
  <!-- 路由视图 -->
  <router-view />
</template>

<style scoped>
/* 导航栏样式 */
.t-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px; /* 导航栏高度 */
  background-color: white;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
}
</style>